<!doctype html>
<html lang="en">

<head>
	<title>Home</title>
	{%include file="public/head_common" /%}
	<link rel="stylesheet" href="__STATIC__/assets/css/plug.css">
	<link rel="stylesheet" href="__ROOT__/assets/addons/shopro/libs/element/element2.css">
</head>

<body>
	<!-- MAIN -->
	<div class="main" id="app">
		<!-- MAIN CONTENT -->
		<div class="main-content">
			<ul class="breadcrumb">
			    <li>仓库管理</li>
			    <li>库存盘点</li>
			</ul>
			<div class="container-fluid">
				<div class="row" style="margin-bottom: 10px;">
					<form class="form-inline">
						<!-- <input type="text" class="form-control" v-model="search.name" placeholder="商品名称"> -->
						<vue-select 
							placeholder="类别"
							v-model="search.cate_name"
							url="{%:url('Goods/getCateListBySort')%}"
							:sorts ="['衣服','下装','鞋','箱包','饰品']"
							style="display: inline-block;width: 100px;">
						</vue-select>
						<vue-select 
							placeholder="品牌"
							v-model="search.brand_name"
							url="{%:url('Brand/getListBySort')%}"
							:sorts ="['AB','CD','EF','GH','IJ','KL','MN','OP','QR','ST','UV','WX','YZ']"
							style="display: inline-block;width: 100px;">
						</vue-select>
						<input type="text" class="form-control" v-model="search.number" placeholder="仓库编号">
						<input type="text" class="form-control" v-model="search.tel" placeholder="联系电话">
					    <button type="button" class="btn btn-primary" @click="getList()">查询</button>
					    <button type="button" class="btn btn-default" @click="resetForm()">重置</button>
						<!-- <button type="button" class="btn btn-primary" @click="openWarehouse">添加</button> -->
						<button type="button" class="btn btn-primary" @click="inventory">盘点</button>
					</form>
				</div>
				<!-- 数据开始-->
				<div class="row">
					<table class="table table-bordered table-hover">
						<thead>
							<tr>
								<th>商品图像</th>
								<th>商品名称</th>
								<th>尺码</th>
								<th>颜色</th>
								<th>成本价</th>
								<th>类别</th>
								<th>品牌</th>
								<th>所属仓库</th>
								<th>当前库存</th>
								<th>盘点数量</th>
								<th>盘盈盘亏</th>
								<th>相关操作</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(row,index) in rows">
								<td>
									<a :href="row.goodsinfo.picture" title='点击看大图' target="_BLANK" class="pre_view">
										<img :src="row.goodsinfo.pic_tmb" height="38">
									</a>
								</td>
								<td>{{ row.goodsinfo.name }}</td>
								<td>{{ row.spec }}</td>
								<td>{{ row.color }}</td>
								<td>{{ row.origin_price }}</td>
								<td>{{ row.goodsinfo.cate_info.name }}</td>
								<td>{{ row.goodsinfo.brand_info.name }}</td>
								<td>{{ row.warehouseinfo.name }}</td>
								<td>{{ row.nums }}</td>
								<td>
									<!-- <input type="number"  class="form-control" v-model="row.stock" > -->
									<el-input
										  v-model.number="row.stock"
										  type="number"
										  maxlength="300"
										  style="width: 100px;"
										  size="mini"
										  autofocus
										  @blur="check_tab"
										/>
									
								</td>
								<td @click="check_tab">{{ row.check }}</td>
								<td>
									<!-- <a href="#" @click="openWarehouse(2,row)" ><i class="fa"> </i>  详情</a> -->
								</td>
							</tr>
							<tr v-if="rows.length===0">
								<td colspan="8" style="color:red">查询无记录</td>
							</tr>
						</tbody>
					</table>
					<div id="pageBar">
						<vue-page :total_page='total_page' :cur_page='cur_page' @do-page='getList'></vue-page>
					</div>
				</div>
				<!-- 数据结束-->				
			</div>
		</div>
		<!-- 添加、修改 仓库 -->
		<!-- 修改物流 -->
		<el-dialog
		:title="title"
		center
		:visible.sync="showModal"
		width="20%">
			<span slot="footer" class="dialog-footer">
				<button type="button" class="btn btn-primary" @click="overage">盘盈单</button>
				<button type="button" class="btn btn-primary" @click="loss">盘亏单</button>
			</span>
		</el-dialog>
		<!-- END MAIN CONTENT -->
	</div>	
	<!-- 商品编辑模板 -->
	<!-- Javascript -->
	<script src="__STATIC__/assets/vendor/jquery/jquery.min.js"></script>
	<script src="__STATIC__/assets/vendor/vue.js"></script>
	<script src="__STATIC__/assets/vendor/base64.js"></script>
	<script src="__STATIC__/components/vue-page.js"></script>
	<script src="__STATIC__/components/vue-select.js"></script>
	<script src="__STATIC__/components/vue-modal.js"></script>
	<script src="__STATIC__/assets/vendor/layer-v3.1.1/layer/layer.js"></script>
	<script src="__ROOT__/assets/addons/shopro/libs/element/element.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
				search: {
					name: '',
					number: '',
					tel:''
				},
				rows: [],
				total_page: 0,
				cur_page: 1,
				showModal: false,
				title:'盘点单类型',
			},
			components: {
				'vue-page': vuePage,
				'vue-select': vueSelect,
			},
			//watch监听
			watch:{
				//监控person对象的值,对象的监控只能获取新值
				search: {
					//开启深度监控；监控对象中的属性值变化
					deep: true,
					//获取到对象的最新属性数据(obj代表新对象)
					handler(newValue, oldValue){
						this.getList();
					}
				}
			},
			created: function(){
				this.getList();
				
			},
			methods:{
				
				//盘盈单 - 其他入库单
				overage(){
					if(this.check_tab()){
						let arr = this.rows;
						let data=[];
						for (var i = 0; i < arr.length; i++) {
							if((arr[i].check-0)>0){
								var obj={};
								obj['goods']=arr[i].goods;
								obj['attr']=arr[i].attr;
								obj['warehouse']=arr[i].warehouse;
								obj['batch']=arr[i].batch;
								obj['nums']=arr[i].check;
								obj['goods_pic']=arr[i].goodsinfo.picture;
								obj['name']=arr[i].goodsinfo.name;
								
								data.push(obj);
							}
						}
						if(data.length>0){
							//判断单据打开情况
							var href="{%:url('Warehouse/add_otpurchase')%}?info="+Base64.encode(JSON.stringify(data)) + '&pagetype=1';
							location.href = href;
						}else{
							this.$message.error('盘盈单数据为空,请核实!');
						}
					}
				},
				//盘亏单 - 其他出库单
				loss(){
					if(this.check_tab()){
						let arr = this.rows;
						let data=[];
						for (var i = 0; i < arr.length; i++) {
							if((arr[i].check-0)<0){
								var obj={};
								obj['room']=arr[i].id;
								obj['goods']=arr[i].goods;
								obj['warehouse']=arr[i].warehouse;
								obj['nums']=Math.abs(arr[i].check);
								obj['goods_pic']=arr[i].goodsinfo.picture;
								obj['name']=arr[i].goodsinfo.name;

								data.push(obj);
							}
						}
						if(data.length>0){
							//判断单据打开情况
							var href="{%:url('Warehouse/add_otsale')%}?info="+Base64.encode(JSON.stringify(data)) + '&pagetype=1';
							location.href = href;
						}else{
							this.$message.error('盘亏单数据为空,请核实!');
						}
					}
				},
				// 检查数据
				check_tab(){
					let data = this.rows;
					for (var i = 0; i < data.length; i++) {
						//排除空行
						if(data[i].stock !== ''){
							//开始判断
							if(data[i].stock < 0){
								this.$message.error(`第${i+1}行盘点数量错误!`);
								return false;
							}else{
								//计算行数据
								let check=(data[i].stock-0)-(data[i].nums-0);//计算盘盈盘亏
								this.rows[i]['check'] = check;
							}
						}
					}
					return true;
				},
				// 盘点
				inventory(){
					this.showModal = true;
				},
				getList: function(page=1){
					var _this = this;
					var data = this.search;
					$.post("{%:url('Warehouse/room_list')%}?page=" + page,data,function(rsp){
						console.log({rsp});
						_this.rows = rsp.data.rows;
						_this.total_page = rsp.data.total_page;
						_this.cur_page = Number(rsp.data.page);
					},'json')
				},
				resetForm: function(){
					for (var i in this.search){
						this.search[i] = '';
					}
				}	
			}
		});
		var tip_index;
		//鼠标事件
		$('table').on('mouseover','a.pre_view',function(){
			tip_index = layer.tips("<img src='"+$(this).attr('href')+"' height='220'>", this, {
				tips: [2, '#eee'],
				time: 0
			});
		}).on('mouseleave','a.pre_view',function(){
			layer.close(tip_index);
		})	

	</script>
</body>

</html>